<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 100px;
            border: 2px solid rosybrown;
        }
    </style>
</head>

<body>
    <input type="text" name="txt">&nbsp;
    <button onclick="fn()">复制</button>
    <div id="box">
    </div>




    <div style="height: 90px;width: 1000px;">
        <h2 id="ok"></h2>
    </div>
    <button onclick="screen()">click</button>












    <script type="text/javascript">
        var newH2 = document.createElement('h2');
        var div = document.getElementById('box');
        div.appendChild(newH2);
        function fn() {
            var input = document.querySelector('input').value;
            newH2.innerText = input;

            // console.log(input);
            // var txt = document.createTextNode(input);
            // newH2.appendChild(txt);
            // document.getElementsByTagName('input')[0].value = '';
        }



        function screen() {
            var pre = document.querySelector('#ok');
            var text = 'Non Terrae Plus Ultra';
            if (pre.value == undefined) {
                pre.innerText = text;
                pre.value=text;
            } else {
                pre.innerText='';
                pre.value=undefined;
            }
        }
    </script>
</body>

</html>